// Toolbar styling

#toolbar {
    background-color: var(--grey-0);
    transition: @mode-transition background-color ease;
    color:var(--grey-4);
    box-shadow:0px 0px 5px 5px 15px rgba(0,0,0,.25);

    &.mute {
        // border-bottom:none;
    }

    .button {
        transition:@fast-transition all ease;

        &:not(.pomodoro):hover {
            background-color: var(--grey-1);
            transition:@fast-transition all ease;
        }

        // Pomodoro meter
        &.pomodoro svg {
            // Colours for the pomodoro counter
            .pomodoro-meter       { fill: var(--grey-2); }
            .pomodoro-value.task  { fill: var(--pomodoro-task); }
            .pomodoro-value.short { fill: var(--pomodoro-short); }
            .pomodoro-value.long  { fill: var(--pomodoro-long); }
        }
    }

    .file-info { font-size: @font-size-small * 0.8; }

    svg#search-progress-indicator {
      opacity: 1;
      transition: 0.2s opacity ease;
      .indicator-meter { fill: var(--grey-2); }
      .indicator-value { fill: var(--c-primary); }

      &.hidden { opacity: 0; }
    }

    .searchbar input {
        color:inherit;
        background-color:white;
        border:1px solid white;
        font-size: @font-size-small * 0.8;
        transition:0.5s border-color ease;

        &:focus {
            border-color: var(--grey-1);
        }
    }
}
